<template>
  <div class="lists">
    <Banner></Banner>
    <mainContent :catname="catname">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">{{catname}}</dt>
          <dd class="menu_dd have hover" @click="toDynamic()">{{catname}}</dd>
          <dd class="menu_dd" @click="toVideoCenter()">视频中心</dd>

        </dl>


      </div>

      <div slot="inner_content">
        <!--莲塘动态-->
        <div class="page_con">
          <div class="lt_dynamic">
            <div class="content">
              <div class="left"><img style="width: 100%;height: 100%;object-fit: cover"
                                     :src="dtimg"/></div>
              <div class="right">
                <div v-for="(item,index) in dynamicList" :key="index" @click="toPath(item.id)" class="dynamic_list">
                  <p style="color: black;font-size: 30px">{{item.title}}</p>
                  <div class="desc"
                       style="color: #8b8c8b;font-size: 24px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                    {{item.desc}}
                  </div>
                  <p style="font-size: 28px;color: #a3afb7;text-align: left">{{item.create_at}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--莲塘动态-->
      </div>


    </mainContent>
    <footerBar></footerBar>
    <MainMenu></MainMenu>
  </div>
</template>

<script>
  import Banner from '../../components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import footerBar from '../../components/content/footerBar'
  import mainContent from '../../components/content/mainContent'

  export default {
    name: "lists",
    components: {
      Banner,
      MainMenu,
      footerBar,
      mainContent,
    },
    data() {
      return {
        dynamicList: [],
        flag: false,
        dtimg:'',
        menu_bg:'',
        catname: this.$util.title_name + "动态",
      }
    },

    created() {
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.dtimg = this.$util.storage.get("dtimg");
      this.getDynamic();
    },
    methods: {

      toVideoCenter() {
        // console.log('前往视频中心！');
        this.$router.push("/video_list");

      },
      toDynamic() {
        this.$router.push("/news");
      },
      defaulLight() {

      },


      getDynamic() {
        this.$http.get("api/ScreenkApi/getColumnContent?type="+this.$route.query.type+"&page=1&limit=10000", {vollege_id: this.$util.vollege_id}, r => {
          console.log('莲塘动态:', r.data.data);
          this.dynamicList = r.data.data;
        });
      },//获取莲塘动态
      toPath(id) {
        let that = this;
        that.$router.push({path: '/detail', query: {id: id,name:that.$util.title_name+"动态"}});
        that.$util.storage.set("did", id);
        // this.$router.push("/detail");
      },
    }
  }
</script>

<style scoped>
  .desc {
    line-height: 1.5;
  }

  .lists {
    width: 100vw;
    height: 1080px;
    background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;
  }

  .lt_dynamic {
    height: 667px;
    width: 1620px;
    box-sizing: border-box;
    padding-top: 60px;
    padding-right: 320px;
  }

  .content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .left {
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
    padding-left: 25px;
  }

  .right {
    flex: 1;
    overflow-y: scroll;
    box-sizing: border-box;
    padding-left: 60px;
  }

  .dynamic_list {
    margin-bottom: 15px;
    width: 100%;
    height: 175px;
    box-sizing: border-box;
    padding-left: 10px;
    border-bottom: 2px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }


  .son_menu {
    width: 150px;
    height: 54px;
    line-height: 54px;
    margin: 15px auto;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: url('../../assets/images/page/son_menu.png') no-repeat left center;
    transition: all 0.3s ease-out;
  }

  .son_menu.hover {
    background: url('../../assets/images/page/son_menu_hover.png') no-repeat left center;
  }

  .menu_dd.have {
    transition: all 0.3s ease-in;
  }

  .inner_content {
    padding: 60px 50px 0 260px;
  }


</style>
